<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/flexible.js"></script>
		<!-- <script src="js/echarts.min.js"></script>-->
		<script src="js/echarts新版.js"></script>
		<script>
			window.onload=function(){
				var chartDom = document.getElementsByClassName('main')[0];
				var myChart = echarts.init(chartDom);
				var option;
				var colors=['red','orange','yellow','green','aqua','blue','purple']
				const dataAll = [
				  [
				    [10.0, 8.04],
				    [8.0, 6.95],
				    [13.0, 7.58],
				    [9.0, 8.81],
				    [11.0, 8.33],
				    [14.0, 9.96],
				    [6.0, 7.24],
				    [4.0, 4.26],
				    [12.0, 10.84],
				    [7.0, 4.82],
				    [5.0, 5.68]
				  ],
				  [
				    [10.0, 9.14],
				    [8.0, 8.14],
				    [13.0, 8.74],
				    [9.0, 8.77],
				    [11.0, 9.26],
				    [14.0, 8.1],
				    [6.0, 6.13],
				    [4.0, 3.1],
				    [12.0, 9.13],
				    [7.0, 7.26],
				    [5.0, 4.74]
				  ],
				  [
				    [10.0, 7.46],
				    [8.0, 6.77],
				    [13.0, 12.74],
				    [9.0, 7.11],
				    [11.0, 7.81],
				    [14.0, 8.84],
				    [6.0, 6.08],
				    [4.0, 5.39],
				    [12.0, 8.15],
				    [7.0, 6.42],
				    [5.0, 5.73]
				  ],
				  [
				    [8.0, 6.58],
				    [8.0, 5.76],
				    [8.0, 7.71],
				    [8.0, 8.84],
				    [8.0, 8.47],
				    [8.0, 7.04],
				    [8.0, 5.25],
				    [19.0, 12.5],
				    [8.0, 5.56],
				    [8.0, 7.91],
				    [8.0, 6.89]
				  ]
				];
				// 标线配置
				const markLineOpt = {
					// 开场动画
				  animation: false,
					// 线条标签
				  label: {
				    formatter: 'y = 0.5 * x + 3',
				    align: 'right'
				  },
				  lineStyle: {
				    type: 'solid'
				  },
				  tooltip: {
						// 提示内容
				    formatter: 'y = 0.5 * x + 3'
				  },
					// 线条起点与终点
				  data: [
				    [
				      {
				        coord: [0, 3],
				        symbol: 'none'
				      },
				      {
				        coord: [20, 13],
				        symbol: 'none'
				      }
				    ]
				  ]
				};
				// 四个图
				option = {
				  title: {
				    text: "Anscombe's quartet",
				    left: 'center',
				    top: 0
				  },
					// 调整4个图的位置
				  grid: [
				    { left: '7%', top: '7%', width: '38%', height: '38%' },
				    { right: '7%', top: '7%', width: '38%', height: '38%' },
				    { left: '7%', bottom: '7%', width: '38%', height: '38%' },
				    { right: '7%', bottom: '7%', width: '38%', height: '38%' }
				  ],
				  tooltip: {
				    formatter: 'Group {a}: ({c})'
				  },
					// 设置4个X轴
				  xAxis: [
				    { gridIndex: 0, min: 0, max: 20 },
				    { gridIndex: 1, min: 0, max: 20 },
				    { gridIndex: 2, min: 0, max: 20 },
				    { gridIndex: 3, min: 0, max: 20 }
				  ],
					// 设置4个Y轴
				  yAxis: [
				    { gridIndex: 0, min: 0, max: 15 },
				    { gridIndex: 1, min: 0, max: 15 },
				    { gridIndex: 2, min: 0, max: 15 },
				    { gridIndex: 3, min: 0, max: 15 }
				  ],
				  series: [
						{
							type: 'effectScatter',
							symbolSize: 20,
							xAxisIndex: 0,
							yAxisIndex: 0,
							data: [
								[0,1],
								[4,2]
							]
						},
				    {
				      name: 'I',
							// 设置为散点图
				      type: 'scatter',
							// 使用0号XY轴
				      xAxisIndex: 0,
				      yAxisIndex: 0,
				      data: dataAll[0],
				      markLine: markLineOpt
				    },
				    {
				      name: 'II',
				      type: 'scatter',
				      xAxisIndex: 1,
				      yAxisIndex: 1,
				      data: dataAll[1],
				      markLine: markLineOpt
				    },
				    {
				      name: 'III',
				      type: 'scatter',
				      xAxisIndex: 2,
				      yAxisIndex: 2,
				      data: dataAll[2],
				      markLine: markLineOpt
				    },
				    {
				      name: 'IV',
				      type: 'scatter',
				      xAxisIndex: 3,
				      yAxisIndex: 3,
				      data: dataAll[3],
				      markLine: markLineOpt
				    },
				  ]
				};
				option && myChart.setOption(option);
				window.addEventListener('resize',()=>{
					myChart.resize()
				})
			}
		</script>
		<div style="width: 11rem;height: 8rem;margin-top: 50px;">
			<div class="main" style="width: 9rem;height: 5rem;margin-top: 50px;"></div>
		</div>
	</body>
</html>